<template>
	<view class="cart">
		<view class="flex justify-between text-color-h edit" v-if="list.length>0">
			<view class="">
				已选   
				<text class="main-text-color">{{ totalNumAndPrice.selectNumber }}</text>
				件 
			</view>
			<view class="edit_cart" @tap="is_edit=!is_edit" v-if="!is_edit">编辑商品</view>
			<view class="edit_cart" @tap="is_edit=!is_edit" v-else>完成</view>
		</view>
		<!-- 购物车为空 -->
		<view class="NonCart" v-if="list.length===0">
			<view class="flex flex-align-items" style="flex-direction: column;">
				<image style="" src="https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605792395361.jpg" mode=""></image>
				<view class="text-color-h">购物车空空如也，快去逛逛把</view>
				<view class="btn" @tap="toIndex">去逛逛</view>
			</view>
		</view>
		<!-- 购物车列表 -->
		<view class="padding-x-20 cartList">
			<view v-for="(item,indx) in list" :key="indx" class="cart-item flex flex-align-items padding-y-20" style="border-bottom: 2rpx solid #F1F1F1;">
				<label class="radio-label">
					<!-- transform: scale(0.7)将单选缩小0.7倍 -->
					<radio class="radio" style="transform: scale(0.7);" :value="item.skuId"  color="#FD6801" @tap="clickRadio(indx)" :checked="item.checked" />
				</label>
				<image :src="item.defaultImage" mode=""></image>
				<view class="base-info">
					<view class="cart-title">{{item.skuName}}</view>
					<template v-if="!is_edit">
						<view>
							<text  v-for="(value,key) in item.skuAttrItems" :key="key" class="attr" style="">{{value}}</text>
						</view>
					</template>
					<!-- 编辑SKU -->
					<template v-else>
						<view class="select-sku" style="background-color: #F1F1F1;" @tap="editSku">
							<text  v-for="(value,key) in item.skuAttrItems" :key="key" class="attr" style="padding-left: 20rpx;">{{value}}</text>
						</view>
					</template>
					<view class="price-number">
						<view class="price">￥{{item.price}}</view>
						<view class="" style="margin-top: 20rpx;"  >
							<uni-number-box :min="1" :value="item.payNum" :max="item.stock"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 合计 -->
		<view class="bottom-hj">
			<label class="label-radio">
				<radio value="1"  color="#FD6801" style="transform: scale(0.7);" @tap="doSelectAll" :disabled="disabledSelectAllRadio" :checked="!checkedAll"/>
			</label>
			<template v-if="!is_edit">
				<view class="total-money" >
					合计：<text>￥{{ totalNumAndPrice.totlePrice }}</text>
				</view> 
				<view class="jiesuan-btn" @tap="toPayOrder">
					结算
				</view>
			</template>
			<template v-else>
				<view class="total-money" style="background-color: #DD524D; color: #FFFFFF;" >
					移入收藏
				</view> 
				<view class="jiesuan-btn" @tap="doDeleteGoods">
					删除
				</view>
			</template>
		</view>
		<popu-attr-price ref="SKU" @submitBtn="submitBtn" @selectSkuChange="selectSkuChange" :goods="goods"></popu-attr-price>
	</view>
</template>

<script>
	import uniNumberBox from "@/componets/uni-number-box/uni-number-box.vue"
	import goods from "./goods.js"
	import popuAttrPrice from "../../componets/goods-detail/popu-atrr-price.vue"
	import {
		mapGetters,
		mapMutations,
		mapState,
		mapActions
	} from "vuex"
	export default {
		components: {
			uniNumberBox,
			popuAttrPrice
		},
		data() {
			return {
				is_edit:false,
				goods:goods
			};
		},
		computed: {
			// 利用vuex的state来获取并展示购物车商品
			...mapState({
				list:state=>state.cart2.cartList
			}),
			...mapGetters({
				checkedAll: "checkedAll",
				totalNumAndPrice:"totalNumAndPrice",
				disabledSelectAllRadio:"disabledSelectAllRadio",
				getSelected:"getSelected"
			})
		},
		onShow() {
			this.is_edit=false;
		},
		methods: {
			// mapMutations和mapActions不能再computed计算属性中引用，只能在methods中引用，否则调用传参方法的时候会报错的
			// 具有点击事件的都应当在methods中定义，因为computed页面加载的时候就被调用了
			...mapActions({
				"doSelectAll":"doSelectAll",
				doDeleteGoods:"doDeleteGoods"
			}),
			...mapMutations({
				clickRadio:"clickRadio"
			}),
			toIndex() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			// ----------------------编辑SKU-----------------------------------------
			// 点击规格属性按钮
			editSku(){
				this.$refs.SKU.open();   
			},
			// 弹出曾点击确认
			submitBtn(){
				console.log("submitBtn")
			},
			// sku选择发生变化
			selectSkuChange(sku,num){
				console.log(sku)
				console.log(num)
			},
			// 去结算
			toPayOrder(){
				let goods=this.getSelected;
				if(goods.length>0){
					uni.navigateTo({
						url:"../order-pay/order-pay?goods="+JSON.stringify(goods)
					})
				}
				 
			}
			
		}
	};
</script>

<style lang="less">
	.edit {
		border-bottom: 2rpx solid #f1f1f1;
		border-top: 2rpx solid #f1f1f1;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 99;
		padding: 20rpx;
		// 设置底部边框的阴影
		box-shadow: 0rpx -10rpx 50rpx -5rpx #CCCCCC; 
		.edit_cart{
			margin-right: 40rpx;
		}
	}
	

	.edit_cart::before {
		font-family: 'iconfont' !important; //一定要设置font-family：“iconfont”不然字体无法出来
		content: '\e60d'; //要是用Unicode格式，原生的是&#xe6e3而我们在content要把前面的&#x去掉，并加上一个\即可
	}

	.NonCart {
		width: 100%;
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
	}

	.cart {
		background-color: ;
		width: 100%;
		height: 100%;

		image {
			width: 330rpx;
			height: 218rpx;
		}

		.btn {
			width: 90%;
			height: 80rpx;
			border: 2rpx solid #FD6801;
			margin-top: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FD6801;
			font-size: 30rpx;
			font-weight: 600;
			border-radius: 10rpx;
		}
	}

	// 购物车列表
	.cartList {
		margin-bottom: 100rpx;
		margin-top: 100rpx;
		.cart-item {
			label {
				width: 60rpx;
				height: 60rpx;
				/**
			 *1注意：这里就能体现出来这个属性的重要性了，页面的左边是图片，右边是内容，由于左右是flex布局。当内容太多的时候就会挤压图片
			        导致图片变形，此时图片就应该设置为flex-shrink:0;
			 2讲解：
			        flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
			        如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
			        负值对该属性无效。
			 */
				flex-shrink: 0;
			}

			image {
				width: 150rpx;
				height: 150rpx;
				margin-left: 20rpx;
				border-radius: 10rpx;
				flex-shrink: 0;
			}

			.base-info {
				flex: 1; //占慢右侧剩余的空间，左侧的radio和image都给了宽度
				padding: 0 20rpx;

				.radio {
					transform: scale(0.7);
				}

				.cart-title,
				.price {
					font-size: 30rpx;
					font-weight: 700;
				}

				.attr {
					margin-right: 10rpx;
					color: #999999;
				}

				.price {
					color: #FD6801;
				}

				.price-number {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.select-sku{
					position: relative;
					border-radius: 10rpx;
				}
				.select-sku:before{
					font-family: "iconfont" !important; //一定要设置font-family：“iconfont”不然字体无法出来
					content: "\e65d"; //要是用Unicode格式，原生的是&#xe6e3而我们在content要把前面的&#x去掉，并加上一个\即可
					color: #CCCCCC;
					position: absolute;
					top: 50%;
					right: 0rpx;
					transform: translate(-20rpx,-50%,);
				}
			}

		}
	}
	// 合计结算
	.bottom-hj{
		width: 100%;
		display: flex;
		align-items: stretch;  //stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
		height: 100rpx;
		border-top: 1rpx solid #F1F1F1;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		background-color: #FFFFFF;
		/**
		 * flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
		 * 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
		 */
		.label-radio{
			padding: 0rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}
		.total-money,.jiesuan-btn{
			font-size: 30rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.total-money text{
			color:#FD6801 ;
			
		}
		.jiesuan-btn{
			background-color: #FD6801 ;
			color: #FFFFFF;
			font-weight: 600;
		}
	}
</style>
